<template>
    <div class="role">
        <div class="container">
            <STform
                :ref-obj.sync="searchInfo.ref"
                :data="searchInfo.data"
                :field-list="searchInfo.searchFormList"
                :listTypeInfo="dictList"
                :inline="true"
                :rules="searchInfo.rules"
                label-width=" "
            >
                <template slot="form-btn">
                    <el-button type="primary" @click="doSearch">查询</el-button>
                    <el-button @click="searchInfo.ref && searchInfo.ref.resetFields()">重置</el-button>
                </template>
            </STform>
            <STtable
                size="mini"
                :data.sync="tableData"
                @doRefresh="fetchData"
                :field-list="tables"
                :pagination="pagination"
                :loading="loading"
                @handleEvent="handleEvent"
            >
                <template slot="col-status" slot-scope="scope">
                    {{ dicts.checkStatus[scope.row.status] ? dicts.checkStatus[scope.row.status] : '审核中' }}
                </template>
                <template slot="col-duetime" slot-scope="scope">
                    {{ utils.dateStr(scope.row.duetime, 'Y-m-d h:i') }}
                </template>
                <template slot="col-stime" slot-scope="scope">
                    {{ utils.dateStr(scope.row.stime, 'Y-m-d h:i:s') }}
                </template>
                <template slot="col-btn" slot-scope="scope">
                    <el-button size="mini" type="danger" @click="onDel(scope.row)">删除</el-button>
                </template>
            </STtable>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog :title="page.popTitle" center :visible.sync="page.dialogVisible" :width="page.popWidth">
            <div v-if="page.pop == 2" class="pop_box">
                <div class="pop_concent">您确定要删除“{{ detail.star }}”配置吗？</div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="hidePop">取 消</el-button>
                    <el-button type="primary" @click="doDel">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import STtable from '@/components/common/STtable';
import STform from '@/components/common/STform';
import starSrv from '@/api/social/starSrv.js';
import consts from './consts.js';
import utils from '@/libs/utils.js';
import { mapState } from 'vuex'; //本地取信息
export default {
    components: { STtable, STform },
    data() {
        return {
            utils: utils,
            searchInfo: {
                ref: null,
                data: {
                    //搜索展示的字段
                    query: '',
                    stime: [],
                    starid: '',
                    userid: ''
                },
                rules: {},
                searchFormList: consts.searchFormList // 查询列表表单列 数据
            },
            page: {
                tabheight: '100%',
                popWidth: '75%',
                popTitle: null,
                dialogVisible: false,
                pop: 0
            },
            multipleSelection: [], //选中数据
            sysPageForm: {
                //搜索实际请求的字段
            },
            loading: true,
            tableData: [], //列表数据
            tables: consts.tables,
            pagination: {
                // 分页数据
                pageNum: 1, // 当前页
                pageSize: 20, // 每页条数
                total: 0, //合计条数
                sorts: { id: 'DESC' }, //排序信息
                pageSizes: [5, 10, 20, 50, 100], // 分页数量列表
                sizeChange: val => {
                    this.onSizeChange(val);
                },
                currentChange: pageNum => {
                    this.onCurrentChange(pageNum);
                },
                sortsChange: sorts => {
                    this.onSortsChange(sorts);
                }
            }
        };
    },
    async created() {
        await this.fetchData();
        this.loading = false;
    },
    computed: {
        dictList() {
            return this.$store.getters['dictSrv/list'];
        },
        ...mapState({
            dicts: state => {
                return state.dictSrv.data;
            }
        })
    },
    methods: {
        doSearch() {
            const data = this.searchInfo.data;
            Object.assign(this.sysPageForm, data);
            this.sysPageForm.starid = parseInt(this.sysPageForm.starid);
            this.sysPageForm.userid = parseInt(this.sysPageForm.userid);
            this.fetchData(this.sysPageForm);
        },
        onSortsChange(sorts) {
            this.pagination.sorts = sorts;
            this.fetchData(this.sysPageForm);
        },
        onSizeChange(pageSize) {
            this.pagination.pageSize = pageSize;
            this.fetchData(this.sysPageForm);
        },
        onCurrentChange(pageNum) {
            this.pagination.pageNum = pageNum;
            this.fetchData(this.sysPageForm);
        },
        async onStatus(data, status) {
            if (data.status == status) {
                return; //状态没有改变
            }
            this.details = data;
            this.showPop(2);
        },
        async doStatus() {
            const osjon = await starSrv.doStatus({ id: this.details.id, status: this.details.status == 1 ? 2 : 1 });
            if (osjon) {
                this.hidePop();
                this.fetchData();
            }
        },
        async onDel(res) {
            this.detail = res;
            this.showPop(2);
        },

        async doDel() {
            const osjon = await starSrv.doDelete({ id: this.detail.id });
            if (osjon) {
                this.hidePop();
                this.fetchData();
            }
        },
        async fetchData(params) {
            this.loading = false;
            const { pageNum, pageSize, sorts } = this.pagination;
            const ojson = await starSrv.getList({ start: (pageNum - 1) * pageSize, limit: pageSize, sorts: sorts, ...params });
            if (ojson) {
                this.tableData = ojson.list ? ojson.list : [];
                this.pagination.total = ojson.total;
            }
            this.loading = false;
        },
        handleEvent(type, data) {
            switch (type) {
                case 'tableCheck':
                    this.multipleSelection = [];
                    for (const index in data) {
                        this.multipleSelection.push(data[index].styleId);
                    }
                    break;
            }
        },
        showPop(pop) {
            this.page.popWidth = '300px';
            if (pop == 2) {
                this.page.popWidth = '500px';
                this.page.popTitle = '删除日程';
            }
            this.page.pop = pop;
            this.page.dialogVisible = true;
        },
        hidePop() {
            this.page.dialogVisible = false;
            this.page.pop = 0;
        }
    }
};
</script>

<style></style>
